import React, { useState,useEffect } from 'react';
import { Table, Form, Button } from 'antd';
import {
  MenuOutlined
} from '@ant-design/icons';

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import styles from './styles.module.less';



const mapStateToProps = state => ({
  alertList: state.userPage.alertList,
  selectedRowkeys: state.userPage.selectedRowKeys
});

const mapDispatchToProps = dispatch => {
    return {
        getAlertList: dispatch.userPage.getAlertList,
    }
};
const onSelectChange = selectedRowkeys => {
  this.setState({ selectedRowkeys })
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(({ alertList, getAlertList,selectedRowkeys }) => {

    const loading = alertList.length === 0;
    const tableColumn = [
        {
            title: '名称',
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: '设备',
            key: 'address',
            dataIndex: 'address'
        },
        {
            title: '数据类型',
            key: 'role',
            dataIndex: 'role'
        },
        {
            title: '图表类型',
            key: 'action',
            dataIndex: 'action'
        },
        {
            title: '时间',
            key: 'time',
            dataIndex: 'time'
        }
    ];

    useEffect(() => {
        getAlertList();
    }, []);
    
    const rowSelection = {
      selectedRowkeys,
      onChange: onSelectChange,
    };
      return (
        <div className={ styles.container }>
            <div>
              <MenuOutlined />
              <div style={{float:"right"}}>
                <Button type="text">全部删除</Button>
                <Button type="text">批量删除</Button>
                {/* 导出 */}
              </div>
            </div>
            <Table rowSelection={rowSelection} className={ styles.table } loading={ loading } dataSource={ alertList } bordered columns={ tableColumn }/>
        </div>
    );
}));